{template "header-huiyuan.html"}
<link href="{THEME_PATH}assets/global/plugins/bootstrap-fileinput/bootstrap-fileinput.css" rel="stylesheet" type="text/css" />

<script src="{THEME_PATH}assets/js/avatar/iscroll-zoom.js"></script>
<script src="{THEME_PATH}assets/js/avatar/hammer.js"></script>
<script src="{THEME_PATH}assets/js/avatar/lrz.all.bundle.js"></script>
<script src="{THEME_PATH}assets/js/avatar/jquery.photoClip.js"></script>
<!--主页-->
{template "fanhui-index.html"}
<div class="d-container">
	<div class="d-row">
		<div class="col-md-6 col-md-offset-3  d-yuanjiao-20">
			<div class="row">
				<div class="d-yuanjiao-10 d-kuan d-bianhua-20 ">
					<div id="content_list">
						{if $ci->member_cache['config']['avatar']}
						{if $member.is_avatar}
						<div class="alert alert-success">
						    头像认证成功
						</div>
						{else}
						<div class="alert alert-danger">
						    系统强制用户上传头像
						</div>
						{/if}
						{/if}
						{if $edit_verify}
						<div class="alert alert-danger">
						    {if $edit_verify.status}头像信息已提交，等待管理员审核{else} {dr_date($edit_verify.updatetime)}审核被拒绝：{$edit_verify.result}{/if}
						</div>
						{/if}
						<div class="d-neirong-juzhong d-kuan">
						    <div id="view1">
								<img width="100" height="100" class="img-circle" src="{$avatar_url}?cache={SYS_TIME}">
							</div>
						</div>
						<div class="d-clear d-kuan"></div>
						<div id="clipArea"></div>
						
						<div class="form-body d-kuan d-shang-20" style="text-align: center">
						    <div class="fileinput fileinput-new" data-provides="fileinput">
								<span class="btn green btn-file">
									<span class="fileinput-new"> 选择图片 </span>
									<input type="file" id="file">
								</span>
						    </div>
						    <button type="button" class="btn btn-info" id="clipBtn"> 保存头像</button>
						</div>
						<form action="" class="form-horizontal " method="post" name="myform" id="myform">
						    {$form}
						</form>
						
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<style>
    #clipArea {
        margin-top: 20px;
        height: 400px;
        width: 100%;
		border-radius: 15px;
    }
    #file,
    #clipBtn {
        margin: 5px;
    }
    #view1 {
        width: 100%; 
		text-align: center; padding: 30px
		-webkit-filter: drop-shadow(10px 10px 10px rgba(102, 102, 102, 0.5)); /*考虑浏览器兼容性：兼容 Chrome, Safari, Opera */
		filter: drop-shadow(10px 10px 10px rgba(132, 132, 132, 0.5));
    }
</style>

<script>
    var clipArea = new bjj.PhotoClip("#clipArea", {
        size: [200, 200],
        outputSize: [200, 200],
        file: "#file",
        view: "#view",
        ok: "#clipBtn",
        loadStart: function() {
            //console.log("照片读取中");
        },
        loadComplete: function() {
            //console.log("照片读取完成");
        },
        clipFinish: function(dataURL) {
            $('#dr_file').val(dataURL);
            dr_ajax_submit('{dr_now_url()}', 'myform', '2000', '{dr_member_url('account/avatar', ['r'=>rand(0, 9999)])}');
            if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
                window.applicationCache.update();
            }
        }
    });
</script>

{template "fanhui.html"}
{template "mfooter.html"}